<template>
  <view class="addressBox">
    <!-- #ifdef APP-PLUS || MP -->
    <app-plus-bar/>
    <!-- #endif -->
    <uni-nav-bar :fixed="true"
                 title="选择城市"
                 :shadow='false'
                 color="#fff"
                 background-color="#0AAFFF"
                 left-icon="back"
                 @click-left="_handleLeft">
    </uni-nav-bar>
    <view class="addressContent">
      <view class="currAddress">当前位置：上海市</view>
      <view class="addTitle">已有信息城市</view>
      <view class="addWrap">
        <view class="addressLsit" v-for="item,index in address" :key='index'>
          <view class="addressName">{{item.name}}</view>
          <view class="addressNum">{{item.num}}机构</view>
        </view>
      </view>
      <view class="bottomBox">
        <view class="text">我们正在开发其它城市培训资源，精确期待！</view>
        <view class="text">感谢你对xxx支持</view>
      </view>
    </view>
  </view>

</template>

<script>
  import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  import uniIcon from '@/components/uni-icon/uni-icon.vue'
  import appPlusBar from '@/components/appPlusBar.vue'

  export default {
    components: {
      uniNavBar,
      uniIcon,
      appPlusBar
    },
    data() {
      return {
        address: [
          {
            name: '上海市',
            id: '0',
            num: '999'
          },
          {
            name: '上海市',
            id: '1',
            num: '999'
          },
          {
            name: '上海市',
            id: '2',
            num: '999'
          },
          {
            name: '上海市',
            id: '3',
            num: '999'
          },
          {
            name: '上海市',
            id: '4',
            num: '999'
          },
          {
            name: '上海市',
            id: '5',
            num: '999'
          },
          {
            name: '上海市',
            id: '6',
            num: '999'
          },
          {
            name: '上海市',
            id: '7',
            num: '999'
          },
        ]
      }
    },
    onLoad() {
    },
    methods: {
      _handleTab(index) {
        console.log(index)
      },
      _handleLeft() {
        uni.navigateBack()
      },
      _handleRight() {
        uni.showToast({
          title: 'right'
        });
      },
    }
  }
</script>
<style scoped lang=scss>
  .addressBox {
    height: 100%;
    .addressContent {
      height: 100%;
      display: flex;
      flex-direction: column;
      font-size: 32upx;
      .currAddress {
        padding: 0 20upx;
        height: 88upx;
        line-height: 88upx;
      }

      .addTitle {
        padding: 0 20upx;
        height: 88upx;
        line-height: 88upx;
        background: rgba(238, 238, 238, 0.47);
      }

      .addressLsit {
        padding: 0 20upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80upx;
        font-size: 30upx;
        border-bottom: 1upx solid #f8f8f8;
        color: #ABABAB;
      }

      .addressNum {
        color: #00b7ee;
      }
      .bottomBox {
        padding-top: 30upx;
        flex: 1;
        background: rgba(238, 238, 238, 0.47);
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 28upx;
        color: #888;
      }
    }
  }
</style>
